<template>
  <c-loading :loading="loading">
    <view class="container">
      <view class="block">
        <c-cell-box required label="快递公司" :range="logisticsCompanys" type="picker" @change="onChange" v-model="state.logisticsCompany" />
        <c-cell-box required label="快递单号" v-model="state.logisticsNo" type="text" append="scan" @append="showQrCode" />
      </view>
      <view class="fixed-footer flex al-center shadow">
        <c-button @tap="onSubmit" type="primary">确认提交</c-button>
      </view>
      <view class="end"></view>
    </view>
  </c-loading>
</template>
<script setup>
import { CButton, CLoading, CCellBox } from '@/components';
import { useLoading, useRouter } from '@/hooks';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { reactive } from 'vue';
import api from '@/api';

const router = useRouter();
const info = reactive({
  logisticsType: 1,
  orderNo: '',
  afterOrderNo: ''
});
const logisticsCompanys = ['顺丰快递', '京东快递', '天天快递', '极兔快递', '圆通快递', '德邦物流', '申通快递', '韵达快递'];

const state = reactive({
  remark: '',
  logisticsCompany: '',
  logisticsNo: ''
});
const { loading } = useLoading(options => {
  info.orderNo = options.orderNo;
  info.afterOrderNo = options.afterNo;
});

const onChange = e => {
  state.logisticsCompany = logisticsCompanys[e.detail.value];
};
const showQrCode = () => {
  Taro.scanCode({
    scanType: ['barCode', 'qrCode'],
    onlyFromCamera: false,
    success: r => {
      state.logisticsNo = r.result;
    }
  });
};
const onSubmit = async () => {
  await api.order
    .logisticsDelivery({
      ...info,
      logistics: [{ ...state }]
    })
    .toast('提交成功');

  router.back();
};
</script>
<style lang="scss"></style>
